<template>
  <!-- 创建申请 -->
  <view class="apply-order">
    <uni-card class="apply-card" title="申请信息" >
    	<uni-forms ref="applyRef" :modelValue="orderForm" :rules="formRules" :border="true" class="card-form">
        <uni-forms-item label="申请部门" name="applyDepartment">
          <picker @change="changePickerOne" :value="orderForm.applyDepartment" :range="departData" >
            <view class="uni-input">{{departData[orderForm.applyDepartment]}}</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item label="领用部门" name="useDepartment">
         <picker @change="changePickerTwo" :value="orderForm.useDepartment" :range="departData">
           <view class="uni-input">{{departData[orderForm.useDepartment]}}</view>
         </picker>
        </uni-forms-item>
        <uni-forms-item label="领用厂区" name="factory">
          <picker @change="changePickerThree" :value="orderForm.factory" :range="factoryData">
            <view class="uni-input">{{factoryData[orderForm.factory]}}</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item label="领料用途" name="useType">
          <picker @change="changePickerFour" :value="orderForm.useType" :range="sueTypeData">
            <view class="uni-input">{{sueTypeData[orderForm.useType]}}</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item label="是否加急" name="isUrgent">
          <switch :checked="orderForm.isUrgent" @change="changeIsUrgentFive" />
        </uni-forms-item>
        <uni-forms-item label="机台号" name="workbenchNum">
          <uni-easyinput type="text" v-model="orderForm.workbenchNum" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="备注" name="remark">
          <uni-easyinput type="text" v-model="orderForm.remark" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="扫码">
          <button class="red-btn" size="mini" @click="handelScanCode"> 扫码 </button>
        </uni-forms-item>
        <uni-forms-item label="储位编码" name="storageCode">
          <uni-easyinput type="text" v-model="orderForm.storageCode" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="物料信息">
          <uni-file-picker 
            v-model="orderForm.fileData" 
            file-mediatype="all" 
            limit="1" 
            @progress="fileProgress"
            @success="fileSuccess" 
            @fail="fileFail"
            @select="handleFileUpload"
             >
          	<button class="red-btn" size="mini">选择文件</button>
          </uni-file-picker>
        </uni-forms-item>
        <uni-forms-item label="审核流程">
          <!-- 流程 -->
          <uni-steps :options="processLists" active-color="#007AFF" :active="orderForm.processStatus" direction="column" />
        </uni-forms-item>
      </uni-forms>
    </uni-card>
    <!-- 底部-按钮 btn-group -->
    <view class="btn-group-in">
      <button class="red-btn" @click="handleSave">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';





/* 表单 */
const orderForm = ref({
  applyDepartment: 0,
  useDepartment: 0,
  factory: 0,
  useType: 0,
  applyDepartmentName: '', // 申请部门
  useDepartmentName: '', // 领用部门
  factoryName: '', // 领用厂区
  useTypeName: '',  // 领料用途
  isUrgent: false, // 是否加急
  fileData: {},  //上传文件
  processStatus: 0, // 流程步骤
})
const formRules =  ref()

/* 基础选项数据  */ 
const departData = ref(['工业工程中心', '总经办', '物控中心', '财务中心'])
const changePickerOne = (e)=>{
  orderForm.value.applyDepartment = e.detail.value
}
const changePickerTwo = (e)=>{
  orderForm.value.useDepartment = e.detail.value
}

/* 厂区  */  
const factoryData = ref([ '三厂平仓','二厂平仓','博汇二期仓库','五厂二期立库' ])
const changePickerThree = (e)=>{
  orderForm.value.factory = e.detail.value
}

/* 领料用途 */ 
const sueTypeData = ref([ '日常办公','日常损耗','电脑耗材','月用量' ])
const changePickerFour = (e)=>{
  orderForm.value.useType = e.detail.value
}
/* 是否急用 */ 
const changeIsUrgentFive = (e)=>{
  orderForm.value.isUrgent = e.detail.value
}
/* 扫码 */ 
const handelScanCode = ()=>{
  uni.scanCode({
    onlyFromCamera:true,
    success:function(res){
      orderForm.value.remark = `类型：${res.scanType},内容：${res.result}`
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);
    }
  })
}


/* 文件上传 */ 
// 选择文件后触发
const handleFileUpload = (e)=>{
  console.log('eee--->0',e);
  if(e.tempFiles[0].extname !== 'xlsx'){
    return uni.showToast({ title: '文件类型不符合',duration: 3000,icon:'none' })
  }
  orderForm.value.fileData = JSON.stringify(e.tempFiles)
}
// 文件上传时触发
const fileProgress = (e)=>{
  console.log('eee--->11',e);
}
//
const fileSuccess = (e)=>{
  console.log('eee--->2',e);
}
const fileFail = (e)=>{
  console.log('eee--->3',e);
}

/* 流程图  */
const processStatus =  ref(0)
const processLists = ref([
  { title: '内部审核人',desc: '檀健次'}, 
  { title: '外部审核人',desc: '王嘉尔'}
  ])


/* 保存 */ 
const handleSave =async ()=>{
  let query = {
    ...orderForm.value,  
    applyDepartmentName: departData.value[orderForm.value.applyDepartment],   
    useDepartmentName: departData.value[orderForm.value.useDepartment], 
    factoryName: factoryData.value[orderForm.value.factory],
    useTypeName: sueTypeData.value[orderForm.value.useType],
    processStatus: 1, // 流程到下一步了
    status: 0,
  }
  const { data: res } = await uni.$http.post('/addMaterialApply',query)
  if(res.success) {
    uni.showToast({ title: '保存成功', duration: 3000, icon:'none' })
    uni.switchTab({ url: '/pages/home/home' })
  } else {
    uni.showToast({ title: res.msg, duration: 3000, icon:'none' })
  }
}


</script>

<style>
.apply-card {
  width: 100%;
  height: 100%;
}
.btn-group-in{
  width: 80%;
  margin-bottom: 25px;
}
</style>
